<template>
  <div class="hello">
    <index-header></index-header>
    <detail-sec-header :FirstName="this.productName"></detail-sec-header>
    <detail-top
    :data="detail"
     ></detail-top>
    <detail-bottom
    :data="detail"></detail-bottom>
    <index-footer></index-footer>
    
    <!-- <div class="show"></div> -->
  </div>

  
</template>

<script>
import IndexHeader from './../Index/components/Header.vue';
import IndexFooter from './../Index/components/Footer.vue';
import DetailSecHeader from './components/SecHeader.vue';
import DetailTop from './components/DetailTop.vue';
import DetailBottom from './components/DetailBottom.vue';
import { mapState } from 'vuex'
import axios from 'axios'
export default {
    name: 'ProductDetail',
    components:{
    IndexHeader,
    DetailSecHeader,
    IndexFooter,
    DetailTop,
    DetailBottom 
    },
    data () {
    return {
        productName:'',
        productFirstName:'',
        productSecondName:'',
        detail:{}
        
    }
    },
    computed:{
    ...mapState(['baseUrl'])
    },
    watch: {
      '$route' (to, from) {
          // console.log("当前路由路径",this.$route.path);
          this.getDetail()
      }
    },
    mounted(){
        // console.log('mounted')
        this.getDetail()
    },
    methods:{
        getDetail(){
           
            axios.get(this.baseUrl+'product/'+this.$route.params.id
                )
        .then(this.getDetailSucc)
        },
        getDetailSucc(response){
          this.detail = response.data
          this.productName =  response.data.name
          this.productFirstName=  response.data.first_title
          this.productSecondName = response.data.scond_title
        },
        

    }
}
</script>

<style lang="stylus" scoped>
html 
  transition all 0.3s
.show
  height 400px
</style>
